<!--
 * @Descripttion: 
 * @version: 
 * @Author: Mr. Xu
 * @Date: 2020-09-24 16:49:55
 * @LastEditors: Mr. Xu
 * @LastEditTime: 2020-12-14 08:53:59
-->

<div class="header">
    <img src="__PUBLIC__/images/xs_logo.png"  alt="LOGO">

    <span class="header_title"></span>
                
    <ul class="header_link">
        {foreach $menus as $k1=>$data}
            {if $type_key==0}
                {if $k1==0}
                    <li class='on' data-type_key="{$k1}">
                            <a href="javascript:;" >{$data.name}</a>
                    </li>
                {else}
                    <li data-type_key="{$k1}">
                        <a href="javascript:;" >{$data.name}</a>
                    </li>
                {/if}
            {else}
                <li {if $type_key==$k1} class='on' {/if} data-type_key="{$k1}">
                    <a href="javascript:;" >{$data.name}</a>
                </li>
            {/if}
        {/foreach}
    </ul>

    <div class="header_icon">
        <a href=""  title="刷新"><i class="layui-icon layui-icon-refresh"></i></a>
    </div>

    <div class="header_mores">
        
        <div class="head-br"></div>
        <div class="name"></div>
        <div class="type-box">
            <div class="type">
                {$power_name}
                <div class="drop">
                    <div class="drop-content editpassword">
                        <a href="javascript:;" data-url="{:url('admin/admin/editpassword')}">修改密码</a>
                    </div>
                    <!-- <div class="drop-content personal"><a href="javascript:;" data-type_key="user_info" data-is_screen="1" class="a" data-url="{:url('admin/admin/personal')}">个人中心</a></div> -->
                    <div class="drop-content"><a href="javascript:;" id="logout">退出</a></div>
                </div>
            </div>
            <div class="triangle-icon"><i class="layui-icon layui-icon-triangle-d"></i></div>
        </div>
    </div>
</div>

<style>
    .head-br {
        width: 1px; 
        height: 20px; 
        background-color: #E6EBF0;
        margin-right: 20px;
    }
    .header_mores {
        display: flex;
        align-items: center;
        margin-right: 40px;
    }
    .name {
        font-size: 14px;
        color: #475669;
        margin-right: 10px;
    }
    .type-box {
        display: flex;
        align-items: center;
    }
    .type {
        height: 26px;
        padding: 1px 10px;
        border-radius: 30px;
        background-color: #F0F3F6;
        color: #5D6B7C;
        display: flex;
        align-items: center;
        font-size: 12px;
        cursor: pointer;
        position: relative;
        margin-right: 10px;
    }
    .drop {
        padding: 5px 0;
        box-sizing: border-box;
        position: absolute;
        background-color: #ffffff;
        border-radius: 5px;
        width: 150px;
        /* height: 200px; */
        top: 40px;
        right: -2000px;
        opacity: 0;
        transition: all 0.3s;
        visibility: hidden;
        box-shadow: 0 8px 8px rgba(10,16,20,.24),0 0 8px rgba(10,16,20,.12)
    }
    .drop-content {
        width: 100%;
        height: 30px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
    }
    .triangle-icon {
        transition: all 0.3s;
    }
    .drop-content:hover{
        background-color: #F2F2F2;
    }
    .type-box:hover .drop {
        visibility:visible;
        opacity: 1;
        right: -20px;
    }
    .type-box:hover .triangle-icon {
        transform:rotate(180deg);
    }
</style>